﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoodsClassfy.aspx.cs" Inherits="Inventory.view.GoodsClassfy" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link href="../Content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../Content/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../Content/js/common.js"></script>
    <style type="text/css">
        .button {
            display: inline-block;
            zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
            *display: inline;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }

            .button:hover {
                text-decoration: none;
            }

            .button:active {
                position: relative;
                top: 1px;
            }
        /* white */
        .white {
            color: #606060;
            border: solid 1px #b7b7b7;
            background: #fff;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
            background: -moz-linear-gradient(top, #fff, #ededed);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
        }

            .white:hover {
                background: #ededed;
                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
                background: -moz-linear-gradient(top, #fff, #dcdcdc);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
            }

            .white:active {
                color: #999;
                background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
                background: -moz-linear-gradient(top, #ededed, #fff);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
            }

        .even {
            background: #eef1f8;
        }

        .odd {
            background: #ffffff;
        }

        .selected {
            background: #d3dbec;
        }
         table {
            width: 1200px;
            padding: 0;
            margin: 0;
            table-layout: fixed;
        }

        th {
            font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: center;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA no-repeat;
        }

        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            font-size: 12px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
            text-align: left;
            overflow: hidden;
        }
        .shadow {
            display: none;
            background: #000000;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
            z-index: 999;
            position: fixed;
            _position: absolute;
            _top: expression(eval(document.compatMode && document.compatMode== 'CSS1Compat' ) ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
        }

        .popbox {
            display: none;
            z-index: 1001;
            width: 500px;
            height: 300px;
            background: #F7F7F7;
            border: 1px #999999 solid;
            position: fixed;
            top: 15%;
            left: 45%;
            margin: -50px 0px 0px -200px;
            _margin-top: 0px;
            _position: absolute;
            _top: expression(eval(document.compatMode && document.compatMode== 'CSS1Compat' ) ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
        }

            .popbox h5 {
                height: 30px;
                line-height: 30px;
                padding: 1px 1px 1px 10px;
                background: #FFFFFF;
                border-bottom: 1px #999999 solid;
                font-size: 16px;
            }

                .popbox h5 #title {
                    float: left;
                    color: #FF3300;
                }

                .popbox h5 #close {
                    display: block;
                    background: url(shadow_box_close.jpg) no-repeat;
                    width: 12px;
                    height: 12px;
                    float: right;
                    margin: 8px;
                    display: inline;
                }

                    .popbox h5 #close:hover {
                        background-position: -12px 0;
                    }

            .popbox p {
                padding: 15px;
                font-size: 14px;
                text-align: center;
            }
    </style>
    <script type="text/javascript">
        //加载，隐藏子分类
        function OpenChild(obj) {
            var shijian = new Date();
            if ($(obj).attr("src") == "../Content/image/open.gif") {
                $(obj).attr("src", "../Content/image/close.gif");
                $(obj).parent().parent().siblings().show();//显示子分类
                //加载子分类
                var tr = "";
                if ($(obj).attr("isload") == "false") {//如果子类名优家再过，需要读取数据库
                    $.getJSON("GoodsClassfy.aspx?action=getchild&parentId=" + $(obj).parent().parent().attr("idd") + "", function (childJson) {
                        $(childJson).each(function (childIndex, childValue) {
                            tr += "<tr idd=\"" + childValue.Id + "\" parentId=\"" + childValue.ParentId + "\">";
                            tr += "<td style='text-align:right'>子分类</td>";
                            tr += "<td fieldname='id' style=\"display:none\">" + childValue.Id + "</td>";
                            tr += "<td fieldname='parentId' style=\"display:none\">" + childValue.ParentId + "</td>";
                            tr += "<td style=\"display:none\">" + childValue.ParentName + "</td>";
                            tr += "<td fieldname='className'>&nbsp;&nbsp;&nbsp;<input type='text' value='" + childValue.ClassName + "' /></td>";
                            tr += "<td>" + childValue.AddDate + "</td>";
                            tr += "<td style=\"display:none\">" + childValue.Seq + "</td>";
                            tr += "<td><a style='cursor:pointer' onclick=Del(this)>删除</a></td>";
                            tr += "</tr>";
                        });
                        tr += "<tr parentId=\"" + $(obj).parent().parent().attr("idd") + "\">";
                        tr += "<td style='text-align:right'>子分类</td>";
                        tr += "<td fieldname='id' style=\"display:none\"></td>";
                        tr += "<td fieldname='parentId' style=\"display:none\">" + $(obj).parent().parent().attr("idd") + "</td>";
                        tr += "<td style=\"display:none\"></td>";
                        tr += "<td fieldname='className'>&nbsp;&nbsp;&nbsp;<a style='cursor:pointer' onclick=addChild(this)>添加子分类</a></td>";
                        tr += "<td>" + Date.prototype.Format("yyyy-MM-dd") + "</td>";
                        tr += "<td style=\"display:none\"></td>";
                        tr += "<td></td>";
                        tr += "</tr>";
                        $(obj).parent().parent().after(tr);
                    });
                    $(obj).attr("isload", "true");
                }
            } else {
                $(obj).attr("src", "../Content/image/open.gif")
                $(obj).parent().parent().siblings().hide();
            }
        }

        //添加子类
        function addChild(obj) {
            $(obj).parent().append("<input type='text' value='' />");
            var tr = "";
            tr += "<tr parentId=\"" + $(obj).parent().parent().attr("parentId") + "\">";
            tr += "<td style='text-align:right'>子分类</td>";
            tr += "<td fieldname='id' style=\"display:none\"></td>";
            var partId = $(obj).parent().parent().attr("parentId") == "" ? "-1" : $(obj).parent().parent().attr("parentId");
            tr += "<td fieldname='parentId' style=\"display:none\">" + partId + "</td>";
            tr += "<td style=\"display:none\"></td>";
            tr += "<td fieldname='className'>&nbsp;&nbsp;&nbsp;<a style='cursor:pointer' onclick=addChild(this)>添加子分类</a></td>";
            tr += "<td>" + Date.prototype.Format("yyyy-MM-dd") + "</td>";
            tr += "<td style=\"display:none\"></td>";
            tr += "<td></td>";
            tr += "</tr>";
            $(obj).parent().parent().after(tr);
            $(obj).parent().siblings().last().append("<a style='cursor:pointer' onclick=Del(this)>删除</a>");
            $(obj).remove();
        }

        //删除
        var idStr = "";
        function Del(obj) {
            if ($.trim($(obj).parent().parent().find("td[fieldname='id']").html()) != "") {
                idStr += $.trim($(obj).parent().parent().find("td[fieldname='id']").html()) + ",";
            }
            if ($.trim($(obj).parent().parent().find("td[fieldname='parentId']").html()) == "0") {
                $(obj).parent().parent().parent().remove();
            } else {
                $(obj).parent().parent().remove();
            }
        }

        $(function () {
            $.getJSON("GoodsClassfy.aspx?action=getJson", function (json) {
                var tr = "";
                $(json).each(function (index, value) {
                    tr += "<tbody>";
                    tr += "<tr idd=\"" + value.Id + "\">";
                    tr += "<td width='8%' style='text-align:center'><img src='../Content/image/open.gif' onclick=OpenChild(this) style='cursor:pointer' isload='false' /></td>";
                    tr += "<td fieldname='id' style=\"display:none\">" + value.Id + "</td>";
                    tr += "<td fieldname='parentId' style=\"display:none\">" + value.ParentId + "</td>";
                    tr += "<td style=\"display:none\">" + value.ParentName + "</td>";
                    tr += "<td fieldname='className'><input type='text' value='" + value.ClassName + "' /></td>";
                    tr += "<td>" + value.AddDate + "</td>";
                    tr += "<td style=\"display:none\">" + value.Seq + "</td>";
                    tr += "<td><a style='cursor:pointer' onclick=Del(this)>删除</a></td>";
                    tr += "</tr>";
                    tr += "</tbody>";
                });
                $("#tbodyList").append(tr);
            });

            //保存
            $("#save").click(function () {
                //$("#p_shadow").css('display', 'block');
                //$("#p_popbox").fadeIn('slow');
                idStr = idStr.substr(0, idStr.length - 1);
                var jsonStr = "[";
                $("#tbodyList tbody").each(function () {
                    $(this).find("tr").each(function () {
                        if ($(this).find("td[fieldname=\"className\"] input").length > 0 && $.trim($(this).find("td[fieldname=\"className\"] input").val()) != "") {
                            jsonStr += "{";
                            iid = $.trim($(this).find("td[fieldname=\"id\"]").html()) == "" ? 0 : $.trim($(this).find("td[fieldname=\"id\"]").html())
                            jsonStr += '"id":"' + iid + '",';
                            parentiid = $.trim($(this).find("td[fieldname=\"parentId\"]").html()) == "" ? 0 : $.trim($(this).find("td[fieldname=\"parentId\"]").html());
                            jsonStr += "\"parentId\":\"" + parentiid + "\",";
                            jsonStr += "\"className\":\"" + $.trim($(this).find("td[fieldname=\"className\"] input").val()) + "\"";
                            jsonStr += "},";
                        }
                    });
                });
                jsonStr = jsonStr.substr(0, jsonStr.length - 1);
                if (jsonStr.length > 0) {
                    jsonStr += "]";
                }
                $.ajax({
                    type: "POST",
                    url: "GoodsClassfy.aspx",
                    data: "action=save&delids=" + idStr + "&jsonStr=" + jsonStr,
                    success: function (msg) {
                        alert("Data Saved: " + msg);
                    }
                });
            });
            $("#close").click(function () {
                $("#p_shadow").css('display', 'none');
                $("#p_popbox").fadeOut('fast');
            });

            $("#add").click(function () {
                var addStr = "";//需要添加的的内容
                addStr += "<tbody>";
                //***********主分类部分*****
                addStr += "<tr>";
                addStr += "<td width='8%' style='text-align:center'><img src='../Content/image/open.gif' onclick=OpenChild(this) style='cursor:pointer' /></td>";
                addStr += "<td fieldname='id' style=\"display:none\"></td>";
                addStr += "<td fieldname='parentId' style=\"display:none\">0</td>";
                addStr += "<td style=\"display:none\"></td>";
                addStr += "<td fieldname='className'><input type='text' value='' /></td>";
                addStr += "<td>" + Date.prototype.Format("yyyy-MM-dd") + "</td>";
                addStr += "<td style=\"display:none\"></td>";
                addStr += "<td><a style='cursor:pointer' onclick=Del(this)>删除</a></td>";
                addStr += "</tr>";
                //***********子分类部分*****
                addStr += "<tr parentId='' style='display:none'>";
                addStr += "<td style='text-align:right'>子分类</td>";
                addStr += "<td fieldname='id' style=\"display:none\"></td>";
                addStr += "<td fieldname='parentId' style=\"display:none\">-1</td>";
                addStr += "<td style=\"display:none\"></td>";
                addStr += "<td fieldname='className'>&nbsp;&nbsp;&nbsp;<a style='cursor:pointer' onclick=addChild(this)>添加子分类</a></td>";
                addStr += "<td>" + Date.prototype.Format("yyyy-MM-dd") + "</td>";
                addStr += "<td style=\"display:none\"></td>";
                addStr += "<td></td>";
                addStr += "</tr>";
                //**************************
                addStr += "</tbody>";
                $("#tbodyList").append(addStr);
            });
        });

    </script>

</head>
<body>

    <div style="text-align: center">
        <div style="width: 1200px; text-align: left; margin: auto">
            <div style="margin-bottom: 10px;">
                <button id="add" class="button white">&nbsp;&nbsp;添加分类&nbsp;&nbsp;</button>
                <button id="save" class="button white" style="margin-left: 20px">保存更改</button>
            </div>
        </div>

        <table class="table table-bordered table-hover" id="tbodyList">
            <thead class="cf">
                <tr>
                    <th></th>
                    <th fieldname="id" style="display: none">ID
                    </th>
                    <th fieldname="parentId" style="display: none">ParentId
                    </th>
                    <th fieldname="parentName" style="display: none">父类名称
                    </th>
                    <th fieldname="className">分类名称
                    </th>
                    <th>创建时间
                    </th>
                    <th fieldname="seq" style="display: none">排序
                    </th>
                    <th>操作
                    </th>
                </tr>
            </thead>
        </table>
        <!-- END PAGE CONTAINER-->
    </div>
    <!-- END PAGE -->
    <div class="shadow" id="p_shadow">
    </div>
    <div class="popbox" id="p_popbox">
        <h5>
            <span id="title">Pop Box</span><a href="javascript:void(0);" id="close" title="Close"
                style="margin-top: -2px;"><i class="icon-remove icon-large"></i></a><div class="c">
                </div>
        </h5>
        <form>
            <table width="100%">
                <tr>
                    <td style="width: 80px; padding-left: 5px;">选择父类
                    </td>
                    <td style="width: 200px">
                        <input type="text" />
                    </td>
                    <td>Some hint here
                    </td>
                </tr>
                <tr>
                    <td style="width: 80px; padding-left: 5px;">选择父类
                    </td>
                    <td style="width: 200px">
                        <input type="text" />
                    </td>
                    <td>Some hint here
                    </td>
                </tr>
                <tr>
                    <td style="padding-left: 5px;">选择父类
                    </td>
                    <td>
                        <select class="small m-wrap" tabindex="1">
                            <option value="Category 1">Category 1</option>
                            <option value="Category 2">Category 2</option>
                            <option value="Category 3">Category 5</option>
                            <option value="Category 4">Category 4</option>
                        </select>
                    </td>
                    <td>some hint here</td>
                </tr>
            </table>
        </form>
    </div>
</body>

<script type="text/javascript">
    //            $("tbody>tr:odd").attr("style","background:#fff;");   //为奇数行添加样式  
    //            $("tbody>tr:even").addClass("even"); //为偶数行添加样式  
    //            $("tbody>tr").mouseover(function(){      //鼠标移动的高亮显示  
    //                $(this).attr("style","background:#d3dbec;");
    //            }).mouseout(function(){  
    //                $(this).removeClass("selected");  
    //            });  
</script>

</html>
